
<style scoped>

/* 轮播图 */
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.body-content{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.video-name{
  width: auto;
  height: 30px;
  display: flex;
  align-items: center;
  span{
    font-weight: bold;
  }

}
</style>


<template>
  <!--顶部 start-->
  <TopHeader/>
  <div style="height: 100vh">
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>报名信息</span>
        </span>
        </template>
        <div class="body-content">
          <el-table :data="queryEntryList" style="width: 100%" max-height="250">
            <el-table-column prop="realName" label="报名人"  />
            <el-table-column fixed prop="createTime" label="报名时间" width="250" >
              <template #default="scope">
                {{dataTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column  label="报名课程"  >
              <template #default="scope">
                {{dictStatus(dict.dict2,scope.row.courseId)}}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="报名状态"  >
              <template #default="scope">
                <el-tag
                    :type="scope.row.status === '6' ? 'success'
                :(scope.row.status === '2'? 'warning'
                :(scope.row.status === '3'? 'danger': ''))"
                    disable-transitions
                >{{ dictStatus(dict.dict3,scope.row.status)}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="checkRemake" width="300"  label="审核备注"  >
              <template #default="scope">
                <div v-if="scope.row.status==='3'">
                   {{dictStatus(dict.dict4,scope.row.checkRemake)}}
                </div>
                <div v-else>{{scope.row.checkRemake}}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
              <template #default="scope">

                <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="Delete"
                               icon-color="#626AEF" :title="'确定要删除名为“'+scope.row.realName+'”的报名吗？'"
                               @confirm="deleteRow(scope.row)">
                  <template #reference>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button
                    type="success"
                    size="small"
                    :disabled="scope.row.status==='6'"
                    @click.prevent="entryBtn(scope.row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="userEntryShow">
            <user-entry-dialog :item-info="userEntryItem" @receive-user-entry="receiveUserEntryFun"></user-entry-dialog>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="学习课程">
        <div class="body-content">
          <div class="demo-collapse" >
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item v-for="(item,index) in querySpeedList"  :name="index" >
                <template #title>
                  <div style="font-weight: bold;font-size: 1.2rem">{{dictStatus( dict.dict2,item.courseId)+'课程'}}</div>
                  <div style="margin-left: 10px;color: #8c8c8c">总体已观看<span style="color:red;">{{ toFixedFun(item.speed)}}</span>%</div>
                </template>
                <el-collapse v-model="activeName2" accordion>
                  <el-collapse-item
                      v-for="(item2,index2) in item.list"
                      :name="index">
                    <template #title>
                      <div style="font-weight: bold;font-size: 1rem;color: #545353">{{dictStatus(lessonDict,item2.name)+'科目'}}</div>
                      <div style="margin-left: 10px;color: #797979">(&nbsp;<span style="color:red;">{{item.list.length}}</span>&nbsp;)</div>
                    </template>
                      <div
                          v-for="item3 in item2.list"
                          style="display: flex;
                        margin-top: 10px;
                        background-color: #e0dfdf;"
                      >
                        <div style="width: 30vw;min-width: 350px; height: 200px;">
                          <div style="width: 355px;height: 190px;">
                            <video-player-dialog :item="item3" @receive-video-player="receiveVideoPlayerFun"></video-player-dialog>
                          </div>
                        </div>
                        <div style="width: 100%;height: 200px;display: flex;justify-content: space-between">
                          <div style="min-width: 20vw;margin-left: 30px; display: flex;justify-content: center;flex-direction: column">
                            <div class="video-name"><span>课程名称：</span>{{item3.videoName}}</div>
                            <div class="video-name"><span>观看时长：</span>{{(item3.visitLong / 60).toFixed(2)}} min </div>
                            <div class="video-name"><span>课程时长：</span>{{(item3.totalLong / 60).toFixed(2)}} min </div>
                            <div class="video-name"><span>最近播放时间：</span>{{moment(item3.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
                            <div>
                              <div style="height: 50px;display: flex;align-items: center" >
                                <el-button type="primary" :icon="VideoPlay">立即播放</el-button>
                              </div>
                            </div>
                          </div>
                          <div class="row-center" style="margin-right: 10px">
                            <el-progress type="dashboard" :width="160"  :percentage="item3.speed">
                              <template #default="{ scope2 }">
                                <span class="percentage-value">{{ toFixedFun(item3.speed) }}%</span>
                                <span class="percentage-label">Progressing</span>
                              </template>
                            </el-progress>
                          </div>
                        </div>

                      </div>
                  </el-collapse-item>
                </el-collapse>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账户信息">
        <div class="body-content">
          账户信息
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统设置">
        <div class="body-content">
          系统设置
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <Footer/>
</template>

<script setup lang="ts">


import TopHeader from "@/views/edu/comm/TopHeader.vue"
import Footer from "@/views/edu/comm/Footer.vue"
import {onMounted, ref, watch} from "vue";
import {postDeleteEntry, postUpdateEntry, queryEntry} from "@/api/edu/entryApi";
import {Calendar, Delete, VideoPlay} from '@element-plus/icons-vue'
import moment from "moment";
import {getQueryLesson, postQueryStatus} from "@/api/edu/dictApi";
import {dictStatus, msg} from "@/config/Tool";
import UserEntryDialog from "@/components/userEntryDialog.vue";
import {ElMessage, UploadProps} from "element-plus";
import {getQuerySpeed} from "@/api/edu/speedApi";
import {visitPath} from "@/api/edu/fileApi";
import VideoPlayerDialog from "@/components/videoPlayerDialog.vue";
const dict = ref({
  dict2:[],
  dict3:[],
  dict4:[],
  dict5:[],
})
const userEntryItem = ref({});
const userEntryShow = ref(false);
const queryEntryList = ref([]);//报名信息
const querySpeedList =ref([]);//学习课程
const activeName = ref(1);//
const activeName2 = ref();//
const lessonDict = ref([]);
const palyIndex=ref();



onMounted(()=>{
  postQueryStatusFun([2,3,4,5])
  queryEntryFun();
  getQuerySpeedFun();
})


function dataTime(time:any){
  return moment(time).format('YYYY-MM-DD HH:mm:ss')
}

function toFixedFun(e:any){
  return Math.ceil(e);
}



/**------------------------调用接口--------------------------*/

/**
 * 标题
 */
function titleFun(e:any){
  lessonDict.value.map(item=>{
  })
}

/**
 * 查询视频进度表
 */

function getQuerySpeedFun(){
  getQuerySpeed().then((res)=>{
    if (res.code==200){
      res.data.map((item:any)=>{
        let result = item.speedList.reduce((acc:any, cur:any) => {
          const key = cur.course;
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(cur);
          return acc;
        }, {});
        const arr = Object.entries(result);
        let resList:any=[];
        arr.map(item3=>{
          resList.push({
            name:item3[0],
            list:item3[1]
          })
        })
      item.list=resList;
      })
      querySpeedList.value=res.data;
    }
  })
}



/**
 * 查询报名信息
 */
function queryEntryFun(){
  queryEntry({}).then((res)=>{
    queryEntryList.value = res.data;
    res.data.forEach((item:any)=>{
      if(item.status==="4"){
        let param =item;
        param.status="5"
        postUpdateEntry(param);
      }
    })
  })
}

/**
 * 查询字典
 */
function postQueryStatusFun(e:any){
  e.forEach((item:any)=>{
    postQueryStatus({type:item}).then((res)=>{
      switch (item){
        case 2:
          dict.value.dict2=res.data;
          break;
        case 3:
          dict.value.dict3=res.data;
          break;
        case 4:
          dict.value.dict4=res.data;
          break;
        case 5:
          dict.value.dict5=res.data;
          break;
        default:
          break;
      }
    })
  });
  getQueryLesson().then((res)=>{
    lessonDict.value=res.data;
  })
}

/**
 * 删除报名信息
 */
function deleteRow(e:any){
  postDeleteEntry({id:e.id}).then((res)=>{
    msg(res,"");
    queryEntryFun();
  })
}

/**
 * 点击编辑审核
 */
function entryBtn(e:any){
  userEntryItem.value = e;
  userEntryShow.value =true;
}

/**
 * 模态返回信息
 */
function receiveUserEntryFun(e:any){
  userEntryShow.value =false;
}






/**
 * 图片上传之前校验类型
 * @param rawFile
 */
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

function receiveVideoPlayerFun(e:any){
  getQuerySpeedFun();
}

</script>


